<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../css/style.css" rel="stylesheet" type="text/css">
    <link href="../../css/mui.css" rel="stylesheet" type="text/css">
    <link href="../../css/monitor.css" rel="stylesheet" type="text/css">
    <style>
        #main .mui-ellipsis-2 {
            font-size: 16px!important;
        }
        
        #list .mui-media-body {
            position: relative;
            width: 4rem;
        }
        
        .meta-info {
            position: absolute;
            left: -0.08rem;
            top: 50px;
            width: 4.65rem;
        }
        
        #video {
            position: fixed;
            top: 0;
            z-index: 9999;
        }
        
        #title {
            height: 40px;
            background: #f1f1f1;
            line-height: 40px;
            padding-left: 0.3rem;
            font-size: 14px;
            position: absolute;
            z-index: 9999;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="mui-content" id="main">
      <div id="video" style="background-color:#000000;"></div>
        <div>

            <div id="list" style="overflow: hidden;">
                <div id="title"></div> 
                <ul class="mui-table-view" style="overflow-y:auto;height: 100%; padding-top: 40px;">
                    <li class="mui-table-view-cell mui-media" v-for="item in items">
                        <a href="javascript:;" @tap="open_detail(item)">
                            <div class="mui-media-object mui-pull-left" :style="{backgroundImage:'url(' + item.pic + ')'}" style="border-radius: 5px;"></div>
                            <div class="mui-media-body fl">
                                <div class="mui-ellipsis-2">{{item.name}}</div>
                                <div class="meta-info">
                                    <div class="author">{{item.author}}</div>
                                    <div class="time mui-pull-right">{{item.catime}}</div>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <script src="../../js/jquery-1.8.3.min.js"></script>
    <script src="../../js/mui.js"></script>
    <script src="../../js/app.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/token.js"></script>
    
    <script type="text/javascript" charset="UTF-8">
  

        var firstid = ''; //最旧的msg id，用于上拉加载
        var lastid = ''; //最新的msg id，用于下拉刷新
        var self = '';
        state = app.getState();
        uid = state.userid;
        memberToken = state.memberToken;
        /*mui.init({
        	pullRefresh: {
        		container: '#list',
        		/*down: {
        			style: 'circle',
        			offset: '0px',
        			auto: true,
        			//callback: pulldownRefresh
        		},
        		up: {
        			contentrefresh: '正在加载...',
        			callback: pullupRefresh
        		}
        	}
        });*/
        var title = '';
        mui.plusReady(function() {
        	
            var self = plus.webview.currentWebview();
            title = self.title
            document.getElementById('title').innerHTML = title;
            if (window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
                plus.nativeUI.toast('似乎已断开与互联网的连接', {
                    verticalAlign: 'top'
                });
                return;
            }
            var data = {
                uid: uid,
                memberToken: memberToken,
            };

            mui.post(Apiurl+'index/ad', data, function(data) {

                if (data && data.length > 0) {
                    list.items = data
                }
                //alert(JSON.stringify(res))
            }, 'json');
            document.getElementById("video").style.width = document.body.clientWidth + "px";
            document.getElementById("video").style.height = document.body.clientWidth * 9 / 16 + "px";
            $('#list').height($(window).height() - $('#video').height())
            $('#list').css("margin-top", $('#video').height())

            self = plus.webview.currentWebview();
            var videourl = self.videourl;
            var posterurl = self.posterurl;
            console.log(posterurl)
            var video = new plus.video.VideoPlayer('video', {
                src: videourl
            });
            video.setOptions({
                autoplay: true,
                poster: posterurl
            });

        });

        //下拉刷新

        //上拉加载
        /*function pullupRefresh() {
        	if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
        		plus.nativeUI.toast('似乎已断开与互联网的连接', {
        			verticalAlign: 'top'
        		});
        		return;
        	}
        	
        	var data = {
        		uid: uid,
        		type: "3",
        		memberToken: memberToken
        	}; 
        	if(firstid) { //说明已有数据，目前处于上拉加载，传递当前Id 返回历史数据
        		data.firstid = firstid; 
        	}
        	//请求历史列表信息流
        	mui.post(Apiurl+'index/ad', data, function(data) {  
        		//alert(firstid)
        		mui('#list').pullRefresh().endPullupToRefresh();
        		if(data && data.length > 0) {  
        			firstid = data[data.length - 1].id;  //保存最后一条消息的id，上拉加载时使用
        			list.items = list.items.concat(data)
        			//alert(firstid)
        		}
        	}, 'json');
        }*/



        var list = new Vue({
            el: '#list',
            data: {
                items: [] //列表信息流数据
            },
            methods: {
                open_detail: function(item) {
                    mui.openWindow({
                        url: item.link,
                        id: 'ad_detail',
                        styles: {
                            "render": "always",
                            "popGesture": "hide",
                            "bounce": "vertical",
                            "bounceBackground": "#efeff4",
                            "titleNView": titleNView = { //详情页原生导航配置
                                autoBackButton: true, //自动绘制返回箭头
                                backgroundColor: '#fff', //导航栏背景色
                                titleText: item.name, //导航栏标题
                                titleColor: '#000', //文字颜色
                                //coverage:"120px",
                                //type: 'transparent', //透明渐变样式
                                splitLine: { //底部分割线
                                    color: '#dfdfdf'
                                }
                            }
                        }

                    });
                }
            }
        });
        var old_back = mui.back;
        mui.back = function(event) {
            //console.log(plus.webview.currentWebview().id);   
            var adWebview = plus.webview.getWebviewById('ad_detail');
            if (adWebview) {
                adWebview.close();
            } else {
                old_back();
            }
        };
    </script>
</body>

</html>